<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="(item, index) in talkStore.talkList" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>
<script setup lang="ts" name="LoveTalk">
import {useTalkStore} from '@/store/LoveTalk'
let talkStore = useTalkStore()
// 以下两种方法都可以拿到state中的数据
console.log('@@@123',talkStore.talkList);
console.log('@@@456',talkStore.$state.talkList);

// $subscribe 订阅 类似watch   
talkStore.$subscribe((mutate,state)=>{  //接收2个参数 mutate: 本次修改的数据   state:store中talkStore的数据
    console.log('$subscribe被执行了',mutate,state);
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
})

function getLoveTalk() {
     talkStore.getATalk()
}

</script>
<style scoped>
.talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>